<template>
  <div class="block dc-task-plan">
    <div class="analysis-box">
      <div class="analysis-query">
        <el-select v-model="queryData.stationName" placeholder="请选择站点" style="width: 140px" class="filter-item">
          <el-option v-for="(item, index) in stationNameOptions" :key="index" :label="item" :value="item" />
        </el-select>
        <el-input v-model.trim="queryData.workItemNo" placeholder="请输入作业单号" style="width: 140px" class="filter-item" />
        <el-input v-model.trim="queryData.bianZhiMan" placeholder="请输入编制人" style="width: 140px" class="filter-item" />
        <el-input v-model.trim="queryData.trainNo" placeholder="请输入机车号" style="width: 140px" class="filter-item" />
        <el-select v-model="queryData.queryStatus" placeholder="请选择状态" style="width: 140px" class="filter-item">
          <el-option v-for="(item, index) in zuoyeOption" :key="index" :label="item.name" :value="item.value" />
        </el-select>

        <el-date-picker v-model="value1" :clearable="false" type="daterange" placeholder="选择开始时间" format="yyyy-MM-dd" value-format="yyyy-MM-dd" @change="startChange" style="width: 250px" placement="bottom-start"></el-date-picker>
        <!-- <el-date-picker v-model="queryData.endTime" :clearable="false" type="date" placeholder="选择结束时间" :picker-options="pickerOptions" format="yyyy-MM-dd" value-format="yyyy-MM-dd" @change="endChange" style="width: 140px" placement="bottom-start"></el-date-picker> -->
        <el-button type="success" class="reset" @click="reset">重置</el-button>
        <el-button class="filter-item" type="primary" icon="el-icon-search" @click="search">查询</el-button>
      </div>
      <el-table :data="dataSource" height="350">
        <el-table-column v-for="column in columns" :key="column.prop" :prop="column.prop" :width="column.width" :align="column.align" :label="column.label">
          <template v-if="column.prop == 'isChange'" #default="{row}">
            <span v-if="row.isChange == 'Y'">是</span>
            <span v-else>否</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="操作">
          <template slot-scope="scope">
            <el-button type="text" @click="openEdit(scope.row)">查看详情</el-button>
            <el-button type="text" @click="openCommand(scope.row)">指令分析</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination background layout="total, sizes, prev, pager, next" @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-size="pageSize" :page-sizes="[10, 50, 100, 200, 500]" :total="total" :current-page="currentPage" align="center"></el-pagination>
    </div>
    <div class="analysis-box two-echart">
      <div>
        <Echarts :options="leftoption" :auto-resize="true"></Echarts>
        <div v-if="JSON.stringify(leftoption) != '{}'" class="zm">车站统计</div>
      </div>
      <div>
        <Echarts :options="rightoption" :auto-resize="true"></Echarts>
        <div v-if="JSON.stringify(rightoption) != '{}'" class="zm">机车统计</div>
      </div>
    </div>
    <el-dialog title="查看作业单" :visible.sync="dialogFormVisible">
      <el-table :data="detailData" :header-cell-style="{ background: '#ffffff', color: '#000000', 'text-align': 'center' }" :row-style="{ background: '#ffffff', color: '#000000', 'text-align': 'center' }" :cell-style="{ background: '#revert', color: '#000000', 'text-align': 'center' }" height="400" class-name="detail-table">
        <el-table-column v-for="column in detailColumn" :key="column.prop" :prop="column.prop" :label="column.label"></el-table-column>
      </el-table>
    </el-dialog>
    <el-dialog title="查看指令" :visible.sync="commandShow" width="80%">
      <el-table :data="commandData" :header-cell-style="{ background: '#ffffff', color: '#000000', 'text-align': 'center' }" :row-style="{ background: '#ffffff', color: '#000000', 'text-align': 'center' }" :cell-style="{ background: '#revert', color: '#000000', 'text-align': 'center' }" height="400" class-name="detail-table">
        <el-table-column v-for="column in commandColumn" :key="column.prop" :prop="column.prop" :label="column.label"></el-table-column>
        <el-table-column prop="accuracy" label="是否准确">
          <template slot-scope="scope">{{ scope.row.accuracy == '1' ? '不准确' : '准确' }}</template>
        </el-table-column>
        <el-table-column prop="consistency" label="是否连贯">
          <template slot-scope="scope">{{ scope.row.consistency == '1' ? '不连贯' : '连贯' }}</template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
// require('../components/echartsThreme')
// import BarChart from './chart'
import { getStationNames } from '@/api/dataQuery'
import { getDcTaskPlanCashInfo, getDataJobTicket, getDataPieChartData, getInstructionAnalysis } from '@/api/statistics'
import Echarts from 'vue-echarts'
import * as echarts from 'echarts'
import './index.scss'
import dayjs from 'dayjs'
export default {
  components: {
    Echarts
  },
  data() {
    return {
      dialogFormVisible: false,
      total: 0,
      zuoyeOption: [{ name: '全部', value: '0' }, { name: '已完成', value: '2' }, { name: '未完成', value: '1' }],
      leftoption: {},
      rightoption: {},
      value1: [dayjs().format('YYYY-MM-DD 00:00:00'), dayjs().format('YYYY-MM-DD 23:59:59')],
      queryData: {
        stationName: '', // 站场名称
        trainNo: '', // 机车号
        workItemNo: '', // 作业单号
        startTime: dayjs().format('YYYY-MM-DD 00:00:00'),
        endTime: dayjs().format('YYYY-MM-DD 23:59:59'),
        queryStatus: '0',
        bianZhiMan: '' // 编制人
      },
      dataState: 0,
      echartsLoading: false,
      listLoading: true,
      tableKey: 0,
      currentPage: 1,
      pageSize: 10,
      total: 0,
      stationNameOptions: [],
      dataSource: [],
      detailData: [],
      commandShow: false,
      commandData: [],
      commandColumn: [{ prop: 'instructionTime', label: '时间', align: 'center' }, { prop: 'trainNumber', label: '车号', align: 'center' }, { prop: 'dj', label: '调机', align: 'center' }, { prop: 'hungItem', label: '当前钩号', align: 'center' }, { prop: 'instructionTypeDict', label: '类型', align: 'center' }, { prop: 'distance', label: '距离', align: 'center' }],
      columns: [
        {
          prop: 'stationName',
          label: '站场名称',
          width: '80',
          align: 'center',
          formatter: row => {
            return `${row.workItem.station}`
          }
        },
        {
          prop: 'workItemNo',
          label: '作业单',
          align: 'center',
          formatter: row => {
            return `${row.workItem.workItemNo}`
          }
        },
        {
          prop: 'bianZhiMan',
          label: '编制人',
          width: '70',
          align: 'center'
        },
        {
          prop: 'shuntNum',
          label: '勾数',
          width: '60',
          align: 'center',
          formatter: row => {
            return `${row.workItem.shuntNum}`
          }
        },
        {
          prop: 'locmotiveNo',
          label: '机车号',
          align: 'center',
          width: '80',
          formatter: row => {
            return `${row.workItem.locmotiveNo}`
          }
        },
        {
          prop: 'zyxm',
          label: '编组',
          width: '50',
          align: 'center',
          formatter: row => {
            return `${row.workItem.zyxm}`
          }
        },
        {
          prop: 'isChange',
          label: '是否变更',
          width: '80',
          align: 'center',
          formatter: (row, column, cellValue) => {
            return cellValue == 'Y' ? '是' : '否'
          }
        },
        { prop: 'kxzxTime', label: '空线走行时间', align: 'center' },
        {
          prop: 'beginTime',
          label: '作业计划开始时间',
          align: 'center',
          formatter: row => {
            return `${row.workItem.beginTime}`
          }
        },
        {
          prop: 'endTime',
          label: '作业计划结束时间',
          align: 'center',
          formatter: row => {
            return `${row.workItem.endTime}`
          }
        },
        { prop: 'beginDate', label: '作业实际开始时间', align: 'center' },
        { prop: 'endDate', label: '作业实际结束时间', align: 'center' },
        { prop: 'avgTime', label: '预计完成时间', align: 'center' }
      ],
      detailColumn: [
        { prop: 'hungNo', label: '勾号', align: 'center' },
        { prop: 'gdName', label: '股道名称', align: 'center' },
        { prop: 'workMethodDict', label: '作业类型', align: 'center' },
        { prop: 'numOfTrain', label: '车数', align: 'center' },
        // { prop: 'hungStateDict', label: '钩状态', align: 'center' },
        { prop: 'tip', label: '备注', align: 'center' }
      ]
    }
  },
  created() {
    this.getAllStationNames()
  },
  mounted() {},
  computed: {
    pickerOptions() {
      let _this = this
      return {
        disabledDate(time) {
          if (_this.queryData.startTime) {
            return time.getTime() < new Date(_this.queryData.startTime).getTime()
          } else {
            return false
          }
        }
      }
    }
  },
  watch: {},
  methods: {
    openCommand(data) {
      let newobj = {
        workId: data.id
      }
      getInstructionAnalysis(newobj).then(res => {
        if (res.code == 0) {
          this.commandData = res.data
          this.commandData.sort((a, b) => {
            const timeA = new Date(a.instructionTime).getTime()
            const timeB = new Date(b.instructionTime).getTime()
            return timeA - timeB
          })
        } else {
          this.commandData = []
        }
      })
      this.commandShow = true
    },

    openEdit(item) {
      if (item.hungItemList.length != 0) {
        this.detailData = item.hungItemList
      } else {
        this.detailData = []
      }
      this.dialogFormVisible = true
    },
    startChange(val) {
      // console.log(val, 'val')
      this.queryData.startTime = val[0] + ' 00:00:00'
      this.queryData.endTime = val[1] + ' 23:59:59'
      // this.queryData.startTime = val + ' 00:00:00'
    },
    endChange(val) {
      this.queryData.endTime = val + ' 23:59:59'
    },
    getAllStationNames() {
      // this.stationNameOptions = []
      getStationNames().then(res => {
        if (res.code === 0) {
          this.stationNameOptions = res.data
          this.queryData.stationName = res.data[0]
          let newObj = this.queryData
          this.getTableData(newObj)
          this.getLeftEchartsData(newObj)
          this.getRightEchartsData(newObj)
        } else {
          this.dataSource = []
          this.leftoption = {}
          this.rightoption = {}
        }
      })
    },
    reset() {
      this.queryData.startTime = dayjs().format('YYYY-MM-DD 00:00:00')
      this.queryData.endTime = dayjs().format('YYYY-MM-DD 23:59:59')
      this.queryData.trainNo = ''
      this.queryData.workItemNo = ''
      this.queryData.bianZhiMan = ''
      this.queryData.queryStatus = '0'
      this.value1 = [dayjs().format('YYYY-MM-DD 00:00:00'), dayjs().format('YYYY-MM-DD 23:59:59')]
      this.currentPage = 1
      this.pageSize = 10
      this.getTableData(this.queryData)
      this.getLeftEchartsData(this.queryData)
      this.getRightEchartsData(this.queryData)
    },
    getTableData(newobj) {
      let obj = {
        page: this.currentPage,
        size: this.pageSize,
        obj: newobj
      }
      getDataJobTicket(obj).then(res => {
        if (res.code == 0) {
          this.dataSource = res.data.records
          this.total = res.data.total
        } else {
          this.dataSource = []
          this.total = 0
          this.$message(res.msg)
        }
      })
    },
    getRightEchartsData(newobj) {
      let obj = {}
      getDataPieChartData(newobj).then(res => {
        if (res.code == 0) {
          if (res.data.length != 0) {
            let color = ['#52BCA9', '#E46666', '#3BA272', '#FC8452', '#9A60B4', '#73C0DE', '#91CC75', '#5470C6']
            let datas = res.data[1].data
            console.log(datas, 'tatasF')
            let newdatas = datas.map(item => {
              item.name = item.label
              return item
            })
            console.log(newdatas, 'newdates')

            let newoption = {
              //你的代码
              color: color,
              tooltip: {
                trigger: 'item',
                extraCssText: 'width: 128px;  box-shadow: 0px 0px 10px 5px rgba(0, 0, 0, 0.05);',
                formatter: function(params) {
                  let str =
                    (params.data &&
                      `<div style="font-weight: bold;">${params.name}</div>
            <div style="display:flex; justify-content: space-between; align-items: center;">
                <span><span style="display: inline-block; width: 6px; height: 6px; border-radius: 50%; background-color: ${color[params.dataIndex]}; margin-right: 4px;"></span>钩数</span>
                <span>${params.data.value}</span>
            </div>`) ||
                    ''
                  return str
                }
              },
              series: [
                {
                  name: '',
                  type: 'pie',
                  radius: '65%',
                  center: ['50%', '50%'],
                  label: {
                    normal: {
                      formatter: '{xx|{b} }机车钩数',
                      rich: {
                        xx: {
                          fontSize: 12,
                          lineHeight: 32,
                          color: '#fff'
                        }
                        // yy: {
                        //   fontSize: 16,
                        //   fontWeight: 600,
                        //   lineHeight: 32,
                        //   color: '#fff'
                        // }
                      }
                    }
                  },
                  data: newdatas,
                  itemStyle: {
                    emphasis: {
                      // 鼠标经过扇形区域时的阴影效果
                      shadowBlur: 10,
                      shadowOffsetX: 0,
                      shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                  },
                  labelLine: {
                    normal: {
                      length: 5,
                      length2: 20,
                      smooth: true
                    }
                  }
                }
              ]
            }
            this.rightoption = newoption
          } else {
            this.rightoption = {}
            this.$message(res.msg)
            this.echartsLoading = true
          }
        } else {
          this.rightoption = {}
          this.$message(res.msg)
          this.echartsLoading = true
        }
      })
    },
    getLeftEchartsData(newobj) {
      let obj = {
        stationName: '',
        trainNo: newobj.trainNo,
        startTime: newobj.startTime,
        endTime: newobj.endTime,
        workItemNo: newobj.workItemNo,
        bianZhiMan: newobj.bianZhiMan,
        queryStatus: newobj.queryStatus
      }
      getDataPieChartData(obj).then(res => {
        if (res.code == 0) {
          if (res.data.length != 0) {
            let color = ['#52BCA9', '#E46666', '#3BA272', '#FC8452', '#9A60B4', '#73C0DE', '#91CC75', '#5470C6']
            let datas = res.data[0].data
            console.log(datas, 'tatasF')
            let newdatas = datas.map(item => {
              item.name = item.label
              return item
            })
            console.log(newdatas, 'newdates')

            let newoption = {
              //你的代码
              color: color,
              tooltip: {
                trigger: 'item',
                extraCssText: 'width: 128px;  box-shadow: 0px 0px 10px 5px rgba(0, 0, 0, 0.05);',
                formatter: function(params) {
                  let str =
                    (params.data &&
                      `<div style="font-weight: bold;">${params.name}</div>
            <div style="display:flex; justify-content: space-between; align-items: center;">
                <span><span style="display: inline-block; width: 6px; height: 6px; border-radius: 50%; background-color: ${color[params.dataIndex]}; margin-right: 4px;"></span>钩数</span>
                <span>${params.data.value}</span>
            </div>`) ||
                    ''
                  return str
                }
              },
              series: [
                {
                  name: '',
                  type: 'pie',
                  radius: '65%',
                  center: ['50%', '50%'],
                  label: {
                    normal: {
                      formatter: '{xx|{b} }站点钩数',
                      rich: {
                        xx: {
                          fontSize: 12,
                          lineHeight: 32,
                          color: '#fff'
                        }
                      }
                    }
                  },
                  data: newdatas,
                  itemStyle: {
                    emphasis: {
                      // 鼠标经过扇形区域时的阴影效果
                      shadowBlur: 10,
                      shadowOffsetX: 0,
                      shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                  },
                  labelLine: {
                    normal: {
                      length: 5,
                      length2: 20,
                      smooth: true
                    }
                  }
                }
              ]
            }
            this.leftoption = newoption
          } else {
            this.leftoption = {}
            this.echartsLoading = true
            this.$message(res.msg)
          }
        } else {
          this.leftoption = {}
          this.$message(res.msg)
          this.echartsLoading = true
        }
      })
    },

    search() {
      this.getTableData(this.queryData)
      this.getLeftEchartsData(this.queryData)
      this.getRightEchartsData(this.queryData)
    },
    handleCurrentChange: function(currentPage) {
      console.log(currentPage, 'currentPage')

      this.currentPage = currentPage
      this.getTableData(this.queryData)
    },
    handleSizeChange: function(size) {
      this.pageSize = size
      this.getTableData(this.queryData)
    }
  }
}
</script>
